<template>
  <div>
    <div><Head></Head></div>
    <div class="FDbanner">
      <FDbanner :isxseats="true" :movieid="movieid"></FDbanner>
    </div>
    <div>
      <Nav></Nav>
    </div>
    <div>
      <div>
        <h2 class="cinemaH2">影院列表 <span>筛选</span></h2>
        <div class="cinema-cell" v-for="item in 10" :key="item">
          <div class="cinema-msg">
            <p class="cinema-msg-p">博影时代影城</p>
            <p class="cinema-address">
              地址：硚口区航空路13号同济医学院杏林学子餐厅3楼博影时代影城
            </p>
            <p>
              <span class="cinema-tags-item">退</span>
              <span class="cinema-tags-item">改签</span>
            </p>
          </div>
          <div class="cinema-msg-right">
            <div class="cinema-msg-pricer">
              <p>
                <span class="rmb">￥</span> <span class="price-num">123</span>
                <span class="price-num-p">起</span>
              </p>
              <p class="cinema-distance">20km</p>
            </div>
            <div class="ticket" @click="toXseats">选坐购票</div>
          </div>
        </div>
      </div>
    </div>
    <div><Footer></Footer></div>
  </div>
</template>
<style lang="scss" scoped>
.FDbanner {
  margin: 80px 0;
}
.cinemaH2 {
  width: 1114px;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
  border-left: 4px solid #f03d37;
  padding-left: 6px;
  line-height: 18px;
  span {
    font-size: 13px;
    color: #666;
    font-weight: 400;
    float: right;
  }
}
.cinema-cell {
  width: 1120px;
  margin: 0 auto;
  padding: 20px 0;
  border-bottom: 1px dashed #e5e5e5;
  display: flex;
  justify-content: space-between;
  .cinema-msg {
    .cinema-msg-p {
      font-size: 16px;
      line-height: 18px;
      color: #333;
      margin-bottom: 10px;
    }
    .cinema-address {
      font-size: 14px;
      line-height: 14px;
      color: #999;
      margin-bottom: 10px;
    }
    .cinema-tags-item {
      display: inline-block;
      border: 0.7px solid #509fc9;
      border-radius: 3px;
      padding: 0 2px;
      margin-right: 8px;
      font-size: 12px;
      color: #509fc9;
      line-height: 18px;
    }
  }
  .cinema-msg-right {
    width: 170px;
    overflow: hidden;
    margin-right: 10px;
    .cinema-msg-pricer {
      float: left;
      p:nth-child(1) {
        color: #f03d37;
        .rmb {
          margin-right: -4px;
          font-size: 12px;
          line-height: 45px;
        }
        .price-num {
          font-size: 16px;
          margin-right: -3px;
          font-weight: 700;
        }
        .price-num-p {
          font-size: 12px;
          color: #999;
          line-height: 45px;
        }
      }
      .cinema-distance {
        height: 17px;
        line-height: 17px;
        margin-top: -8px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999;
      }
    }
    .ticket {
      margin-top: 15px;
      float: right;
      width: 80px;
      height: 30px;
      margin-right: 8px;
      color: #fff;
      background-color: #f03d37;
      font-size: 14px;
      line-height: 30px;
      border-radius: 100px;
      text-align: center;
      box-shadow: 0 2px 10px -2px #f03d37;
    }
  }
}
</style>
<script>
import Head from "../components/home/header";
import Footer from "../components/home/homefooter";
import FDbanner from "../components/filmdetail/FDbanner";
import Nav from "../components/films/navigation";
import filmInfo from "../model/films";
export default {
  data() {
    return {
      movieid: null,
    };
  },
  created() {
    this.movieid = this.$route.params.id;
    // console.log(userid);
  },
  methods: {
    toXseats() {
      this.$router.push({ name: "Xseats" });
    },
  },
  components: {
    Head,
    Footer,
    FDbanner,
    Nav,
  },
};
</script>
